<template>
	<nav-header title="就业意向">
		<view class="p-4">
			<text class="text-xl text-black-33 font-bold block mb-4">基本信息</text>
			<u-form labelPosition="top" :model="userInfo" :rules="rules" ref="uForm" labelWidth="120">
				<u-form-item label="姓名" prop="jcUserName" borderBottom required>
					<u-input v-model="userInfo.jcUserName" border="none" placeholder="请输入姓名"></u-input>
				</u-form-item>
			<!-- 	<u-form-item label="手机号码" prop="phone" borderBottom required>
					<u-input v-model="userInfo.phone" border="none" type="number" placeholder="请输入手机号码"></u-input>
				</u-form-item> -->
				<u-form-item label="性别" borderBottom @click="actionSheetObj.show = true;">
					<text :style="{color: userInfo.sex? '#323233':'#c0c4cc'}" v-text="userInfo.sex || '请选择性别'"></text>
					<text slot="right" class="text-color-theme">选择</text>
				</u-form-item>
				<u-form-item label="出生日期" borderBottom @click="dateObj.show = true;">
					<u-input v-model="userInfo.birthday" disabled disabledColor="#ffffff" placeholder="请选择出生日期" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="发展意向" borderBottom>
					<view class="mt-2">
						<u-checkbox-group v-model="userInfo.direction" placement="column" shape="square" iconSize="20" activeColor="#2d58cb">
							<u-checkbox v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name" :customStyle="{marginBottom: '12px'}"></u-checkbox>
						</u-checkbox-group>
					</view>
				</u-form-item>
				<u-form-item label="备注（选填）">
					<view class="mt-2">
						<u-textarea v-model="userInfo.remark" placeholder="请输入您的意向" height="80" count></u-textarea>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="bg-theme w-full py-4 flex items-center justify-around fixed bottom-0 z-50 text-white" @click="submit">提交</view>
		<u-action-sheet :actions="actionSheetObj.dataList" title="请选择性别" :show="actionSheetObj.show" @select="(item)=>{userInfo.sex = item.name}" :closeOnClickOverlay="true"
			@close="actionSheetObj.show = false"></u-action-sheet>
		<u-datetime-picker v-if="dateObj.show" :show="dateObj.show" v-model="dateObj.defaultDate" mode="date" closeOnClickOverlay :minDate="getMinDate()"
			confirmColor="#2d58cb" @cancel="dateObj.show = false" @close="dateObj.show = false" @confirm="({value})=>{
				userInfo.birthday = $u.timeFormat(value, 'yyyy-mm-dd')
				dateObj.show = false
			}"></u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
	</nav-header>
</template>

<script>
	import NavHeader from '@/components/nav_header.vue'
	import * as systemApi from '@/interface/common/system.js'
	import * as intentionApi from '@/interface/junchuang/intention.js'
	export default {
		components: {
			NavHeader
		},
		data() {
			let df = new this.$dateFormat()
			df.setTime((new Date().getFullYear() - 60) + '-01-01', 'yyyy-0m-0d');
			return {
				checkboxList: [],
				showSex: false,
				dateObj: {
					show: false,
					defaultDate: df.timestamp
				},
				actionSheetObj: {
					show: false,
					dataList: []
				},
				userInfo: {
					id: '',
					jcUserName: '',
					phone: '',
					sex: '',
					remark: '',
					birthday: '',
					direction: []
				},
				rules: {
					'jcUserName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					// phone: [
					// 	{
					// 		required: true,
					// 		message: '请输入手机号',
					// 		trigger: ['change','blur'],
					// 	},
					// 	{
					// 		validator: (rule, value, callback) => {
					// 			console.log(uni.$u);
					// 			return uni.$u.test.mobile(value);
					// 		},
					// 		message: '手机号码不正确',
					// 		trigger: ['change','blur'],
					// 	}
					// ]
				},
			}
		},
		onLoad(e) {
			if (e.id) this.userInfo.id = e.id
		},
		onShow() {
      this.$util.openShare();
			const v = this
			if (v.userInfo.id) {
				intentionApi.getIntentionDetail(v.userInfo.id).then(({ data }) => {
					Object.assign(v.userInfo, data)
					let direction = v.userInfo.direction.split(",")
					v.userInfo.direction = direction
				})
			}
			systemApi.getDictList('mmg_sex').then(({ data }) => {
				v.actionSheetObj.dataList = data.map((item) => ({ name: item.dictLabel, value: item.dictLabel }))
			})
			systemApi.getDictList('jc_direction').then(({ data }) => {
				v.checkboxList = data.map((item) => ({ name: item.dictLabel, value: item.dictLabel }))
			})
		},
		methods: {
			submit() {
				const v = this
				v.$refs.uForm.validate().then(res => {
					v.$util.showLoading('保存中..')
					if (v.userInfo.direction.length > 0) v.userInfo.direction = v.userInfo.direction.join(",")
					intentionApi.saveIntention(v.userInfo).then(res=>{
						v.$util.hideLoading()
						if (res.success) {
							v.$refs.uToast.show({
								message: "保存成功.",
								complete() {
									uni.navigateBack()
								}
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('请填写必填项')
				})
			},
			getMinDate () {
				let df = new this.$dateFormat()
				df.setTime((new Date().getFullYear() - 60) + '-01-01', 'yyyy-0m-0d');
				return df.timestamp
			}
		}
	}
</script>

<style>

</style>
